<template>
  <el-dialog class="dia-style select-pro" :title="title" :visible.sync="isOpen" width="60%">
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" @submit.native.prevent>
      <el-form-item label="名称" prop="queryKeywords">
        <el-input
          v-model="queryParams.queryKeywords"
          placeholder="请输入名称"
          clearable
          style="width: 240px"
          @clear="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click.stop="handleQuery">查询 </el-button>
      </el-form-item>
    </el-form>
    <HkTable
      ref="table"
      :total="total"
      :loading="loading"
      :table-data="tableList"
      :query-params="queryParams"
      :table-columns="qualtableLabel"
      :radiobox="true"

      @singleElection="singleElection"
      @changePage="getList"
    >
      <template #companyInfos="scope">
        <el-tag
          v-for="(item, index) in JSON.parse(JSON.stringify(scope.row.jsonObject)).companyInfos"
          :key="index"
          style="margin-right: 10px"
        >{{ item }}</el-tag>
      </template>
      <template #topic="scope">
        <el-tag>{{ JSON.parse(scope.row.connectInfo).topic }}</el-tag>
      </template>
      <template #databaseName="scope">
        {{ JSON.parse(scope.row.connectInfo).databaseName }}
      </template>
      <template #tableName="scope">
        {{ JSON.parse(scope.row.connectInfo).tableName }}
      </template>
      <template #indexName="scope">
        {{ JSON.parse(scope.row.connectInfo).indexName }}
      </template>
      <template #metaName="scope">
        <el-tag>{{ scope.row.jsonObject.metaName }}</el-tag>
      </template>
    </HkTable>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getList } from '@/api/milkyway/gatherData'
import { getRules } from '@/api/milkyway/taskList'
import { getSource } from '@/api/milkyway/repositorypage'

import HkTable from '../Hk-Table/index.vue'

export default {
  components: { HkTable },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    sourceType: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },

    checkData: {
      type: Array,
      default() {
        return []
      }
    },
    size: {
      type: Number,
      default: 50
    },
    isMultiple: {
      type: Boolean,
      default() {
        return true
      }
    },
    qualtableLabel: {
      type: Array,
      default: () => []
    },
    active: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String | Number,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    outputDataSourceIdList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      total: 0,
      tableList: this.tableData,
      checkNodes: [],
      queryParams: {
        current: 1,
        size: this.size || 50
      },
      isOpen: this.open,
      templateSelection: '',
      planList: [],
      radioRow: {}
    }
  },
  watch: {
    checkData: {
      handler(newValue, oldValue) {}
    },
    tableData: {
      handler(newValue, oldValue) {
        if (newValue === []) return
      }
    },
    tableList: {
      handler(newsVal) {},
      deep: true,
      immediate: true
    }
  },

  mounted() {},

  methods: {
    // 初始化数据
    initSelect(row) {
      this.$nextTick(() => {
        if (row) {
          this.tableList.forEach((item) => {
            row.forEach((i) => {
              if (i.id === item.id) {
                this.$refs.table.templateSelection = item.id
                // this.$refs.table.toggleRowSelection(item);
              }
            })
          })
        } else {
          this.$refs.table.templateSelection = ''
        }
      })
    },
    // indexMethod(index) {
    //   if (!this.queryParams.current || !this.queryParams.size) {
    //     return index + 1;
    //   } else {
    //     return (
    //       index + (this.queryParams.current - 1) * this.queryParams.size + 1
    //     );
    //   }
    // },
    // 打开的时候的方法
    show(data) {
      this.isOpen = true
      this.$nextTick(() => {
        console.log(this.$refs.table)
        if (data.length == 0) {
          this.$refs.table.templateSelection = ''
        }
        this.getList().then((res) => {
          this.initSelect(this.checkData)
        })
      })
    },
    // 重置
    reset() {
      this.$nextTick(() => {
        this.toggleSelection()
        this.templateSelection = ''
        this.resetForm('queryForm')
      })
    },
    /** 获取产品列表*/

    getList(val) {
      return new Promise((resolve, reject) => {
        this.loading = true
        this.queryParams = {
          ...this.queryParams,
          ...val,
          sourceType: this.sourceType || undefined
        }

        if (this.active === 0) {
          getList(this.queryParams).then((res) => {
            this.tableList = res.list
            this.total = res.total
            this.loading = false
            resolve(this.tableList)
          })
        } else if (this.active === 1) {
          getSource(this.queryParams).then((res) => {
            this.tableList = res.list

            this.total = res.total
            this.loading = false
            resolve(this.tableList)
          })
        } else {
          this.queryParams = {
            ...this.queryParams,
            taskId: this.id,
            outputDataSourceIdList: this.outputDataSourceIdList
          }
          // 获取规则列表
          getRules(this.queryParams).then((res) => {
            this.tableList = res.list
            this.total = res.total
            this.loading = false
            resolve(this.tableList)
          })
        }
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      if (this.checkNodes.length > 0) {
        // this.$modal.msgSuccess('修改成功')
      }
      this.$emit('handleSubmit', this.radioRow)
      this.isOpen = false
      this.initSelect(this.checkNodes)
      // this.reset();
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
      this.reset()
      this.radioRow = {}
    },
    /** 搜索按钮操作 */
    handleQuery(val) {
      this.loading = true

      this.getList()
    },
    /** 勾选表格*/
    selectionChange(w, node) {
      if (this.isMultiple) {
        this.checkNodes = w
      }
    },
    /** 单选按钮事件 */
    singleElection(row) {
      this.radioRow = row
    },
    /** 选中数据*/
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.tableRef.toggleRowSelection(row)
        })
      } else {
        // this.$refs.tableRef.clearSelection()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table{
  min-height:460px !important;
}
.el-cascader {
  width: 100%;
}
</style>
<style lang="scss">
::v-deep .targetTable{
  flex:1;
}
.select-pro {
  .el-dialog {
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      padding:0 20px 20px;
      max-height:70vh;
      display: flex !important;
      flex-direction: column !important;
      flex: 1;
      // overflow: scroll;
    }
    .el-dialog__footer {
      // height: 90px;
    }
  }
}
</style>
